<template>
   <div :class="['func-item', {'func-block': !curType.isLabel && funcData.parentId !== '0'}]" >
      <i v-if="funcData.needed" class="title-required">*</i>
       <template v-if="curType.isCheckBox">
            <el-checkbox
                @change="changeCheckBox"
                :checked="funcData.checked"
                :key="funcData.moduleKey"
                :label="funcData.moduleKey"
                :title="funcData.moduleName"
                :disabled="funcData.enable === 0"
                >{{funcData.moduleName}}</el-checkbox>
       </template>
       <template v-else-if="curType.isSwitch">
            <el-switch
                @change="changeSwitch"
                v-model="funcData.checked"
                :disabled="funcData.enable === 0"
                class="func-switch"
            />
            <span class="title">{{funcData.moduleName}}</span>
       </template>
        <template v-else-if="curType.isRadio">
           <el-radio
                v-model="formData[funcData.moduleKey]"
                @change="changeRadioBox"
                :key="funcData.moduleKey"
                :label="funcData.moduleKey"
                :title="funcData.moduleName"
                :disabled="funcData.enable === 0"
                >{{funcData.moduleName}}</el-radio>
       </template>
       <template v-else>
            <span class="title" :class="[{'title-weight': funcData.parentId === '0' }]">{{funcData.moduleName}}</span>
       </template>
        <el-tooltip v-if="funcData.moduleDescription" :content="funcData.moduleDescription" placement="top" effect="light">
           <i class="iconfont icon-wandshuoming1 icon-tip"></i>
        </el-tooltip>
       <slot></slot>
   </div>
</template>

<script setup>
import { defineProps, onMounted, defineEmits, computed, ref} from 'vue'

const emit = defineEmits(['change-item']);

const props = defineProps({
    detail: {
        type: Object,
        default: () => {
            return {}
        }
    }
});

const funcData = computed({
    get: () => props.detail,
    set: (val) => {
        return val
    }
})

const formData = ref({});



// 获取当前类型
const curType = computed(() => {
    let isCheckBox = props.detail.moduleCheckType === 'checkbox';
    let isSwitch = props.detail.moduleCheckType === 'switch';
    let isLabel = props.detail.moduleCheckType === 'label';
    let isRadio = props.detail.moduleCheckType === 'radio';

    return {
        isCheckBox,
        isSwitch,
        isLabel,
        isRadio
    }
})

// 多选
function changeCheckBox () {
    funcData.value.checked = !funcData.value.checked;
    changeSwitch();
}

// 单选
function changeRadioBox () {
    changeSwitch();
}


// switch
function changeSwitch() {
    let tempItem = {
        id: funcData.value.id,
        moduleRuleList: funcData.value.moduleRuleList || undefined,
        moduleSort: funcData.value.moduleSort,
        moduleType: funcData.value.moduleType,
        parentId: funcData.value.parentId,
        moduleKey: funcData.value.moduleKey,
        checked: !!funcData.value.checked,
        moduleName: funcData.value.moduleName
    }
    emit('change-item', tempItem);
}


onMounted(() => {
     formData.value[props.detail.moduleKey] = props.detail.checked ? props.detail.moduleKey : '';
 })


</script>

<style lang="scss" scoped>
.func-item {
    margin-top: 10px;
    display: flex;
    align-items: center;
    .title {
        font-size: 14px;
        font-weight: bold;
        color: #333333;
        margin-right: 8px;
    }
    .title-weight {
        color: #222222 !important;
        font-size: 16px !important;
    }
    .title-required {
        font-style: normal;
        margin-right: 5px;
        color: var(--el-color-danger);
    }

    .func-switch {
       margin-right: 10px;
    }
    .icon-tip {
        color: #666666;
        margin-right: 10px;
    }
    :deep(.el-checkbox) {
        margin-right: 20px;
    }

    &.func-block {
        display: block !important;
        :deep(.func-option) {
            margin-left: 35px;
        }
    }
  
}

</style>